import React, { useMemo } from "react";
import { Table } from "antd";

export const TableWarpper = (props) => {
  const {
    paginationSetting: {
      showSizeChanger,
      showQuickJumper,
      defaultCurrent,
      defaultPageSize = 10,
      hideOnSinglePage = false,
      pageSizeOptions = [10, 20, 30, 50],
      size = 'default',
      total,
      positionPage, // bottomLeft | bottomCenter | bottomRight | none
    },
    tableSetting: { rowSelection, columns, data, bordered },
    onChangePage,
  } = props;

  const onChange = (pageNum, pageSize) => {
    // console.log('e ======', pageNum, pageSize)
    onChangePage(pageNum, pageSize);
  };

  return (
    <div className="tableWarpper">
      {rowSelection && Object.keys(rowSelection).length > 0 ? (
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={data}
          bordered={bordered}
          pagination={{
            showSizeChanger,
            showQuickJumper,
            defaultCurrent,
            defaultPageSize,
            pageSizeOptions,
            hideOnSinglePage,
            size,
            total,
            showTotal: (total) => `共 ${total} 条`,
            position: positionPage,
            onChange: onChange,
          }}
        />
      ) : (
        <Table
          columns={columns}
          dataSource={data}
          bordered={bordered}
          pagination={{
            showSizeChanger,
            showQuickJumper,
            defaultCurrent,
            defaultPageSize,
            pageSizeOptions,
            hideOnSinglePage,
            size,
            total,
            showTotal: (total) => `共 ${total} 条`,
            position: positionPage,
            onChange: onChange,
          }}
        />
      )}
    </div>
  );
};

export default TableWarpper;
